<template>
    <div class="moduleContainer">
        <router-view></router-view>
        <div class="navigation">
            <ul>
                <li>
                    <div class="myHealth" @click="gotoHealth">
                        <div class="health" v-if="!activeHealth"></div>
                        <div class="activeHealth" v-if="activeHealth"></div>
                        <p :style="setActive(activeHealth)">健康</p>
                    </div>
                </li>
                <li>
                    <div class="myRecord" @click="gotoRecord">
                        <div class="record" v-if="!activeRecord"></div>
                        <div class="activeRecord" v-if="activeRecord"></div>
                        <p :style="setActive(activeRecord)">记录</p>
                    </div>
                </li>
                <li>
                    <div class="myForum" @click="gotoForum">
                        <div class="forum" v-if="!activeForum"></div>
                        <div class="activeForum" v-if="activeForum"></div>
                        <p :style="setActive(activeForum)">论坛</p>
                    </div>
                </li>
                <li>
                    <div class="myStore" @click="gotoStore">
                        <div class="store" v-if="!activeStore"></div>
                        <div class="activeStore" v-if="activeStore"></div>
                        <p :style="setActive(activeStore)">商城</p>
                    </div>
                </li>
                <li>
                    <div class="myMyself" @click="gotoMyself">
                        <div class="myself" v-if="!activeMyself"></div>
                        <div class="activeMyself" v-if="activeMyself"></div>
                        <p :style="setActive(activeMyself)">我的</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name:'allModule',
        data(){
            return{
                activeHealth:true,
                activeForum:false,
                activeRecord:false,
                activeStore:false,
                activeMyself:false,
            }
        },
        methods:{
            gotoHealth(){
                if(this.activeHealth===false){
                    this.$router.replace({
                        name:'knowledge'
                    })
                }
                this.activeHealth=true
                this.activeRecord=false
                this.activeForum=false
                this.activeStore=false
                this.activeMyself=false
            },
            gotoRecord(){
                if(this.activeRecord===false){
                    this.$router.replace({
                        name:'record'
                    })
                }
                this.activeHealth=false
                this.activeRecord=true
                this.activeForum=false
                this.activeStore=false
                this.activeMyself=false
            },
            gotoForum(){
                if(this.activeForum===false){
                    this.$router.replace({
                        name:'say'
                    })
                }
                this.activeHealth=false
                this.activeRecord=false
                this.activeForum=true
                this.activeStore=false
                this.activeMyself=false
            },
            gotoStore(){
                if(this.activeStore===false){
                    this.$router.replace({
                        name:'store'
                    })
                }
                this.activeHealth=false
                this.activeRecord=false
                this.activeForum=false
                this.activeStore=true
                this.activeMyself=false
            },
            gotoMyself(){
                if(this.activeMyself===false){
                    this.$router.replace({
                        name:'myself'
                    })
                }
                this.activeHealth=false
                this.activeRecord=false
                this.activeForum=false
                this.activeStore=false
                this.activeMyself=true
            },
            setActive(isShow){
                return isShow ? 'opacity:1' : 'opacity:0.3'
            }
        }
    }
</script>

<style scoped>
    .moduleContainer{
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        background-color: #F6F8FA;
        overflow-y: scroll;
        scrollbar-width: none; 
    }
    .navigation{
        position: absolute;
        bottom: 0;
        height: 1.5rem;
        width: 100%;
        background-color: #FFF;
        overflow: hidden;
        position: fixed;
    }
    .navigation ul{
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        margin-top: 0.1rem;
    }
    .navigation li>div>div{
        background-position: center;
        background-size: contain;
        width: 0.6rem;
        height: 0.6rem;
    }
    .navigation li>div p{
        font-family: 'PingFangSC-Regular';
        color: #333333;
        font-size: 0.25rem;
        width: 0.6rem;
        text-align: center;
        opacity: 0.3;
        transition: all 0.5s;
    }
    .health{
        background-image: url(../assets/img/tab+logo@2x/tab-1health.png);
        opacity: 0.3;
    }
    .activeHealth{
        background-image: url(../assets/img/tab+logo@2x/tab-1activeHealth.png);
    }
    .record{
        background-image: url(../assets/img/tab+logo@2x/tab-2record.png);
        opacity: 0.3;
    }
    .activeRecord{
        background-image: url(../assets/img/tab+logo@2x/tab-2activeRecord.png);
    }
    .forum{
        background-image: url(../assets/img/tab+logo@2x/tab-3forum.png);
        opacity: 0.3;
    }
    .activeForum{
        background-image: url(../assets/img/tab+logo@2x/tab-3activeForum.png);
    }
    .store{
        background-image: url(../assets/img/tab+logo@2x/tab-4store.png);
        opacity: 0.3;
    }
    .activeStore{
        background-image: url(../assets/img/tab+logo@2x/tab-4activeStore.png);
    }
    .myself{
        background-image: url(../assets/img/tab+logo@2x/tab-5myself.png);
        opacity: 0.3;
    }
    .activeMyself{
        background-image: url(../assets/img/tab+logo@2x/tab-5activeMyself.png);
    }
</style>